<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">
          <left-menu></left-menu>
        </el-aside>
        <el-container>
          <el-header>
            <RightTop></RightTop>
          </el-header>
          <el-main>
            <!-- 二级路由出口位置 -->
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import LeftMenu from "@/components/LeftMenu.vue";
import RightTop from "@/components/RightTop.vue";
// 导入路由出口组件
import { RouterView } from "vue-router";
</script>

<style lang="less" scoped>
.common-layout {
  width: 100%;
  height: 100%;

  .el-container {
    width: 100%;
    height: 100%;
  }

  .el-aside {
    width: auto;
    height: 100%;
    background-color: #222;
  }

  .el-header {
    background-color: #222222;
  }

  .el-main {
    width: 100%;
    height: 100%;
    background-color: aliceblue;
  }
}</style>